<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        #div1{
            width: 600px;
            margin: 30px auto;
        }
        .list{
            width: 600px;
            margin: 0 auto;
        }
        .list li{
            line-height: 30px;
            padding: 0 20px;
            display: flex;
            flex: 1;
            justify-content: space-between;
            border-bottom: 1px solid #000;
        }
        .list li span{
            flex: 2;
            text-indent: 20px;
            /* margin-right: auto;
            margin-left: 20px; */
        }
        .list li i{
            font-size: 20px;
            color: rgb(10, 24, 10);
        }
        .list li img{
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <ul class="list">
    </ul>
</body>
<script>
    const list = document.querySelector(".list");
    //复习前后端交互
    //接口地址：https://cnodejs.org/api/v1/topics
    fetch("https://cnodejs.org/api/v1/topics")
        .then(res=>res.json())
        .then(res => {
            console.log(res);
            const data = res.data;
            let renderHTML = "";
            //页面回流 重绘
            data.forEach((item) => {
                renderHTML += `<li>
                                <img src="${item.author.avatar_url}">
                                <span>${item.title}</span>
                                <time>${item.last_reply_at}</time>
                                <i class="iconfont icon-delete"></i>
                                </li>
                `;
                list.innerHTML = renderHTML;
                // const li = document.createElement("li");
                // li.innerHTML = `<img src="${item.author.avatar_url}">
                //                 <span>${item.title}</span>
                //                 <time>${item.last_reply_at}</time>
                //                 <i class="iconfont icon-delete"></i>`;
                // list.appendChild(li);
            });
        })
</script>
</html>